<html>
	<head>
		<title>render 2 columns page with postion:absolute</title>
		<style>
			#out_box{width:80%;margin:10px auto;border:1px solid red;background-color:gray;overflow:hidden;}
			#left_box{float:left;width:30%;position:relative}
			#left_bg{position:absolute;left:0px;top:0px;width:100%;height:9999px;background-color:white;border-right:1px solid red;}
			#left_con{z-index:10;position:relative}
			#right_box{float:right;width:69.9%;}
		</style>
		<!--Ref: http://www.zhangxinxu.com/wordpress/?p=1528 -->
	</head>

	<body>
		<div id='out_box'>
			<div id='left_box'>
				<div id='left_con'>some woerds</div>
				<div id='left_bg'></div>
				
			</div>

			<div id='right_box'>
				some goods
			</div>
		</div>
		
		<div id="btns">
			<input type="button" value="add left content" id="left_btn"/>
			<input type="button" value="add right content" id="right_btn"/>
		</div>
		<script>
			function $(id){return document.getElementById(id)}
			$('left_btn').onclick = function(){
				var left_con = $('left_con')
				left_con.innerHTML += (left_con.innerHTML+"<br>")
			}
			$('right_btn').onclick = function(){
				var right_box = $('right_box')
				right_box.innerHTML += (right_box.innerHTML+"<br>")
			}
		</script>
	</body>
</html>